<template>
  <div>
    <div class="app-container">
      <div class="page_header gongyuan_header">产品详情</div>
      <div class="detail_page">
        <div class="row">
          <div class="detail_label gongyuan_content">产品名称:</div>
          <div class="detail_value gongyuan_content_value">{{formData.productName}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">产品分类:</div>
          <div class="detail_value gongyuan_content_value">{{productType}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">产品设置:</div>
          <div class="detail_value gongyuan_content_value">{{productSetting}}</div>
        </div>
        <div class="row" v-if="formData.productFanPrice">
          <div class="detail_label gongyuan_content">方案产品价格:</div>
          <div class="detail_value gongyuan_content_value">{{formData.productFanPrice}}</div>
        </div>
        <div class="row" v-if="formData.productFanStore">
          <div class="detail_label gongyuan_content">方案库存数量:</div>
          <div class="detail_value gongyuan_content_value">{{formData.productFanStore}}</div>
        </div>
        <div class="row" v-if="formData.productPtoPrice">
          <div class="detail_label gongyuan_content">普通产品价格:</div>
          <div class="detail_value gongyuan_content_value">{{formData.productPtoPrice}}</div>
        </div>
        <div class="row" v-if="formData.productPtoStore">
          <div class="detail_label gongyuan_content">普通库存数量:</div>
          <div class="detail_value gongyuan_content_value">{{formData.productPtoStore}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">产品单位:</div>
          <div class="detail_value gongyuan_content_value">{{formData.productUnit}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">产品类型:</div>
          <div class="detail_value gongyuan_content_value">{{productFun}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">上传图片:</div>
          <div class="detail_value detail_value_imgList">
            <img v-for="img of formData.url" :src="img.url" :key="img.name" />
          </div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">商品介绍:</div>
          <div class="editor_detail" v-html="formData.productTxt"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProDetail } from '@/api/product/pro'
import { getProtypeList } from '@/api/product/protype'
export default {
  name: 'Prodetail',
  components: {},
  data() {
    return {
      formData: {
        productName: undefined,
        productTypeId: undefined,
        productSettingList: [],
        productFanPrice: undefined,
        productFanStore: undefined,
        productPtoPrice: undefined,
        productPtoStore: undefined,
        productUnit: undefined,
        productFunList: [],
        url: null,
        productTxt: ''
      },
      protypeList: [],
      productSettingListOptions: [
        {
          label: '方案产品',
          value: 1
        },
        {
          label: '普通产品',
          value: 2
        }
      ],
      productFunListOptions: []
    }
  },
  computed: {
    productId() {
      return this.$route.query.id
    },
    productType() {
      const productType = this.protypeList.find((per) => per.id === this.formData.productTypeId) || { name: '' }
      return productType.name
    },
    productSetting() {
      if (this.formData.productSettingList) {
        return this.formData.productSettingList
          .map((per) => {
            const obj = this.productSettingListOptions.find((item) => item.value === per) || { label: '' }
            return obj.label
          })
          .join(',')
      }
      return ''
    },
    productFun() {
      if (this.formData.productFunList) {
        return this.formData.productFunList
          .map((per) => {
            const obj = this.productFunListOptions.find((item) => item.value === per) || { label: '' }
            return obj.label
          })
          .join(',')
      }
      return ''
    }
  },
  async created() {
    this.initTypeList()
    this.initProductFunListOptions()
  },
  async mounted() {
    try {
      const res = await getProDetail(this.productId)
      const { productName, productTypeId, productSettingList, productFanPrice, productFanStore, productPtoPrice, productPtoStore, productUnit, productFunList, productTxt, url } = res.data
      this.formData = { productName, productTypeId, productSettingList, productFanPrice, productFanStore, productPtoPrice, productPtoStore, productUnit, productFunList, productTxt, url }
    } catch (error) {
      console.log(error)
    }
  },
  // 编辑类不缓存
  // async activated() {
  // },
  methods: {
    async initTypeList() {
      try {
        const res = await getProtypeList({
          pageNum: 1,
          pageSize: 100000
        })
        if (res.code === 200) {
          this.protypeList = res.rows
        }
      } catch (error) {
        console.log(error)
      }
    },
    async initProductFunListOptions() {
      try {
        const res = await this.getDicts('product_fun')
        if (res.code === 200) {
          this.productFunListOptions = res.data.map((per) => ({
            label: per.dictLabel,
            value: per.dictValue
          }))
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang='scss'>
</style>


